• صورة البطاقة (Card Image)

• جسم البطاقة (Card Body)

• عنوان البطاقة (Card Title)

• نص البطاقة (Card Text)

• أزرار أو روابط (Card Links)

مثال بسيط على هيكل بطاقة:

html
CopyEdit
<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="صورة البطاقة">
  <div class="card-body">
    <h5 class="card-title">عنوان البطاقةh5>
    <p class="card-text">هذا نص مختصر يشرح محتوى البطاقة.p>
    <a href="#" class="btn btn-primary">زر الإجراءa>
  div>
div>

مكونات البطاقة التفصيلية

1. صورة البطاقة (Card Image)

تستخدم لإضافة صورة في أعلى البطاقة أو أسفلها أو كخلفية، وتعتمد على أصناف مثل:

• card-img-top لإضافة صورة في الأعلى.

• card-img-bottom لإضافة صورة في الأسفل.

• card-img-overlay لإضافة صورة مع نص فوقها.

2. جسم البطاقة (Card Body)

وهو القسم الذي يحتوي النصوص، العناوين، الأزرار، وما إلى ذلك. يستخدم الصنف card-body ليتم تطبيق تنسيقات Bootstrap الافتراضية.

3. العناوين والنصوص

يمكنك استخدام أصناف مثل:

• card-title للعناوين.

• card-subtitle للعناوين الفرعية.

• card-text للنصوص.

4. روابط وأزرار البطاقة (Card Links and Buttons)

توفر Bootstrap إمكانية إضافة روابط ضمن البطاقة باستخدام card-link، وكذلك أزرار مع تنسيقات جاهزة مثل btn btn-primary.

أنواع البطاقات في Bootstrap

• بطاقات الصور: تحتوي على صورة بارزة أعلى أو أسفل البطاقة.

• بطاقات مكدسة: بطاقات تحتوي على نصوص وصور بشكل مدمج.

• بطاقات مع قوائم: يمكن إضافة قوائم في جسم البطاقة باستخدام list-group.

• بطاقات مع تراكب نصي: حيث يمكن وضع نص فوق صورة باستخدام card-img-overlay.

خصائص ومزايا البطاقة

• مرونة كبيرة في التخصيص من حيث الحجم واللون والخطوط.

• إمكانية دمج عدة بطاقات معًا ضمن صفوف وأعمدة باستخدام نظام الشبكة (Grid System).

• تصميم متجاوب يعمل بشكل ممتاز على الهواتف والأجهزة اللوحية.

مكون الشرائح الدوارة (Carousel) في Bootstrap

تعريف الشرائح الدوارة

الشرائح الدوارة هي مكون يستخدم لعرض مجموعة من الصور أو المحتوى بشكل متتابع وتلقائي، حيث يتم التبديل بين العناصر بشكل تلقائي أو يدوي باستخدام أزرار التحكم أو النقاط الدالة على الشرائح.

الهيكل الأساسي للشرائح الدوارة

تعتمد الشرائح الدوارة في Bootstrap على تركيب معين من العناصر الرئيسية وهي:

• الحاوية الرئيسية التي تحمل الشرائح، تستخدم الصنف carousel.

• قائمة الشرائح (Slides) تستخدم carousel-inner.

• عناصر الشرائح الفردية تستخدم carousel-item.

• أزرار التحكم للتنقل بين الشرائح carousel-control-prev و carousel-control-next.

• نقاط التنقل (Indicators) التي توضح عدد الشرائح وتسمح بالانتقال إليها مباشرة.

مثال على هيكل شرائح دوارة:

html
CopyEdit
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active">button>
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1">button>
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2">button>
  div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="الشريحة الأولى">
    div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="الشريحة الثانية">
    div>
    <div class="carousel-item">
      <img src="slide3.jpg" class="d-block w-100" alt="الشريحة الثالثة">
    div>
  div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon">span>
    <span class="visually-hidden">السابقspan>
  button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon">span>
    <span class="visually-hidden">التاليspan>
  button>
div>

مكونات الشرائح الدوارة التفصيلية

1. الحاوية الرئيسية (Carousel Container)

تحتوي على جميع مكونات الشرائح وتحدد التسمية والمجموعة التي تنتمي إليها الشرائح.

2. قائمة الشرائح (Carousel Inner)

الحاوية التي تضم الشرائح الفردية.

3. عناصر الشرائح (Carousel Item)

كل شريحة تمثل عنصراً فردياً، ويمكن أن تحتوي على صورة، نص، أو مكونات HTML أخرى.

4. مؤشرات التنقل (Indicators)

تمثل النقاط الموجودة عادة أسفل الشرائح، تساعد المستخدم على معرفة عدد الشرائح والتنقل بينها بسرعة.

5. أزرار التحكم (Controls)

زرين على الجانبين، للتحكم بالتنقل يدوياً إلى الشريحة السابقة أو التالية.

خصائص ومزايا الشرائح الدوارة

• التنقل التلقائي: إمكانية تعيين الشرائح لتتنقل تلقائياً بفاصل زمني محدد.

• التنقل اليدوي: يمكن للمستخدم التنقل يدوياً عبر الأزرار أو النقاط.

• التخصيص: دعم إضافة محتوى متنوع داخل كل شريحة مثل نصوص، أزرار، وحتى فيديوهات.

• الاستجابة: يتكيف المكون تلقائياً مع حجم الشاشة.

• التحكم بالأحداث: يمكن ربط الأحداث في JavaScript لتفعيل إجراءات محددة عند الانتقال بين الشرائح.

استخدامات عملية ومتقدمة لمكون البطاقة والشرائح الدوارة

دمج البطاقات مع الشرائح الدوارة

من الاستخدامات الشائعة والمتقدمة هو استخدام البطاقات داخل الشرائح الدوارة، حيث يمكن وضع بطاقة كاملة في كل شريحة. هذا الأسلوب مفيد في عرض منتجات أو عروض خاصة بشكل جذاب وسلس.

تخصيص تصميم البطاقات

يمكن إضافة تأثيرات CSS مثل الظلال، الحدود المنحنية، تغير الألوان عند التمرير (Hover)، وغيرها لتعزيز الشكل الجمالي للبطاقات.

استخدام الشرائح الدوارة كمعرض صور أو محتوى ترويجي

يُستخدم Carousel في كثير من المواقع لعرض صور متتابعة أو عروض إعلانية تتغير بشكل ديناميكي لجذب انتباه المستخدم.

جدول مقارنة بين مكونات البطاقة والشرائح الدوارة في Bootstrap

خطوات متقدمة لتخصيص مكون البطاقة والشرائح الدوارة

تخصيص البطاقة باستخدام CSS

يمكنك تعديل ألوان الخلفية، الحواف، تباعد العناصر، خطوط النص، وتطبيق تأثيرات الظل بسهولة عبر إضافة CSS مخصص. كما يمكن استخدام متغيرات Sass في Bootstrap لتعديل خصائص البطاقات على نطاق واسع.

تخصيص Carousel بتأثيرات مختلفة

Bootstrap يسمح بتعديل سرعة التنقل بين الشرائح، إضافة تأثيرات انتقال مثل التلاشي (fade)، وتعطيل التشغيل التلقائي أو تخصيصه بفاصل زمني مخصص.

مثال على تفعيل تأثير التلاشي:

html
CopyEdit
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
  ...
div>

دعم الوصول (Accessibility) في مكونات البطاقة والشرائح الدوارة

البطاقة

البطاقات مبنية على مكونات HTML5 قياسية، مما يسهل دعم تقنيات الوصول. يمكن إضافة علامات ARIA لتوضيح محتوى البطاقة للقراء الشاشة.

الشرائح الدوارة

تحتوي على عناصر تحكم واضحة، مع استخدام النصوص البديلة (alt) للصور، وأزرار مع وصف مرئي وواضح. كما يدعم التنقل عبر لوحة المفاتيح، وهذا أمر أساسي لتلبية معايير WCAG.

أمثلة تطبيقية متقدمة

بطاقة مع قائمة مهام داخلها

html
CopyEdit
<div class="card" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">قائمة المهامh5>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">مهمة 1li>
      <li class="list-group-item">مهمة 2li>
      <li class="list-group-item">مهمة 3li>
    ul>
  div>
div>

شرائح دوارة مع نصوص توضيحية وأزرار

html
CopyEdit
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="الصورة الأولى">
      <div class="carousel-caption d-none d-md-block">
        <h5>عنوان الشريحة الأولىh5>
        <p>وصف تفصيلي للشريحة الأولى.p>
        <a href="#" class="btn btn-warning">تعرف أكثرa>
      div>
    div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="الصورة الثانية">
      <div class="carousel-caption d-none d-md-block">
        <h5>عنوان الشريحة الثانيةh5>
        <p>وصف تفصيلي للشريحة الثانية.p>
        <a href="#" class="btn btn-warning">تعرف أكثرa>
      div>
    div>
  div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon">span>
  button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon">span>
  button>
div>

خاتمة

مكونات البطاقة والشرائح الدوارة في Bootstrap تمثل أدوات قوية ومرنة تمكن المطورين من تقديم محتوى متناسق وجذاب، يسهل التعامل معه عبر جميع الأجهزة. توفر هذه المكونات تصميمات جاهزة تساعد في بناء واجهات تفاعلية وسريعة، مع إمكانية التخصيص العالي لتلبية احتياجات التصميم المختلفة. إن الفهم العميق لكيفية عمل هذه المكونات والخصائص التي توفرها يساعد بشكل كبير في تطوير تطبيقات ومواقع ويب متميزة تواكب متطلبات العصر الحديث.

المصادر والمراجع

• التوثيق الرسمي لـ Bootstrap (الإصدار 5)

• التوثيق الرسمي لمكون الشرائح الدوارة في Bootstrap